<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app" >
        <!-- 
            slot 的 默认作用域：指向于分发内容定义时容器的实例
                  ！父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的！
            slot 子组件 作用域插槽的定义：修改数据仓库的指向
                 语法定义 类似于 组件中 父向子进行数据传递的规则 （ 属性绑定+属性拦截 ）
                    + 属性绑定 <slot v-bind:自定义属性名="子组件的作用域变量"></slot>
                    + 属性拦截 通过在分发内容的 template 标签上以 v-slot进行拦截
                        <template v-slot[:插槽名称]="对传递数据进行拦截整合后的对象变量名"></template>
        -->
        <p style="color: green;">父组件自己的username:{{ username }}</p>
        <hr>
        <my-comp>
            <p style="color: goldenrod;">{{ username }}</p>
            <template #title="temp">
                <pre>{{ temp }}</pre>
                <h4 style="color:indianred">{{ temp.titleName }}</h4>
            </template>
        </my-comp>
        <hr>
        <my-comp>
            <template v-slot="comp">
                <p style="color: goldenrod;">{{ username }}</p>
                <p style="color: goldenrod;">{{ comp.username }}</p>
            </template>
            <!-- 可以在取值时直接使用 ES6 解构赋值语法 -->
            <template #title="{ titleName,info }">
                <h4 style="color:indianred">{{ titleName }}</h4>
            </template>
        </my-comp>
    </div>
</body>
<script type="text/x-template" id="myComp">
    <div style="border: 1px solid black;width: 500px;">
        <p>myComp 的 username：{{ username }}</p>
        <hr>
        <slot :username="username"></slot>
        <hr>
        <slot name="title" v-bind:titleName=" titleName " :info="info"></slot>
    </div>
</script>
<script>
    Vue.component("MyComp",{
        template:"#myComp",
        data(){
            return {
                username:"组件内部自己的username",
                titleName:"组件内部自己的数据",
                info:"测试数据"
            }
        }
    })
    new Vue({
        el:"#app",
        data:{
            username:" 父组件的username "
        }
    })
</script>
</html>